<template>
    <div class="home">
      <div class="app-enter flex-box">
        <div>  
          <swiper :options="swiperOption" ref="swiperEnter">
            <swiper-slide class="flex-box">
              <div class="enter-desc">
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">探索生命密码</p>
                <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">全基因组测序</h3>
                <div class="bottom-line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
              </div>
              <img src="../assets/img/enter-a01.png">
            </swiper-slide>
            <swiper-slide class="flex-box">
              <div class="enter-desc">
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">只需五步-轻松检测</p>
                <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">全基因组测序</h3>
                <div class="bottom-line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
              </div>
              <img src="../assets/img/enter-a02.png"> 
            </swiper-slide>
            <swiper-slide class="flex-box">
              <div class="enter-desc">
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">欢迎来到华大基因医学</p>
                <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">全基因组测序</h3>
                <div class="bottom-line ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"></div>
              </div>
              <img src="../assets/img/enter-a03.png">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
          <button @click="startApp" class="enter-btn">开启你的基因之旅</button>
        </div>
      </div>
    </div>
</template>

<script>
// @ is an alias to /src
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import * as swiperAni from '@/quanjiyin/assets/js/common/swiper.animate.min'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'home',
  data() {
    return {
      swiperOption: {
        // resistanceRatio: 0, // 禁止边缘抵抗
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        touchAction: 'none',
        effect: 'fade',
        loop: true,
        fadeEffect: {
          crossFade: true
        },
        on: {
          init: function() {
            swiperAni.swiperAnimateCache(this)
            swiperAni.swiperAnimate(this)
          },
          slideChange: function() {
            swiperAni.swiperAnimate(this)
          }
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiperEnter() {
      return this.$refs.swiperEnter.swiper
    }
  },
  methods: {
    startApp() {
      window.localStorage.clear()
      if (this.$store.state.isLogin === 1) {
        this.$router.push('/sjlists')
      } else {
        this.$router.push('/logPage')
      }
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
}
.app-enter {
  width: 100%;
  height: 100vh;
  background: #f6f7fa;
  box-sizing: border-box;
  flex-wrap: wrap;
  .swiper-container {
    width: r(325);
    height: r(447);
    border-radius: r(12);
    background: #2b4868;
    .swiper-slide {
      width: 100%;
      position: relative;
      text-align: left;
      .enter-desc {
        position: absolute;
        width: 100%;
        top: r(38);
        padding-left: r(32);
        box-sizing: border-box;
        left: 0;
        z-index: 66;
        color: #fff;
        p {
          font-size: r(16);
          letter-spacing: 1px;
          opacity: 0.8;
          position: relative;
          margin-left: r(6);
          display: inline-block;
          &::before {
            position: absolute;
            top: r(-5);
            left: r(-8);
            content: '';
            width: r(10);
            height: r(10);
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            opacity: 0.6;
          }
          &::after {
            position: absolute;
            bottom: r(-5);
            right: r(-8);
            content: '';
            width: r(10);
            height: r(10);
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            opacity: 0.6;
          }
        }
        h3 {
          font-size: r(42);
          letter-spacing: 1.05px;
          margin-top: r(16);
        }
        .bottom-line {
          width: r(175);
          height: r(8);
          border-radius: 2px;
          margin-top: r(16);
          background: -webkit-linear-gradient(left, #fff, #8393a2);
          background: linear-gradient(to right, #fff, #8393a2);
        }
      }
      img {
        width: 100%;
      }
    }
  }
  .enter-btn {
    width: r(215);
    height: r(50);
    border-radius: r(10);
    background: #66b9fe;
    color: #fff;
    border: none;
    outline: none;
    font-size: r(17);
    color: #fff;
    letter-spacing: 0;
    margin-top: r(36);
  }
}
</style>
<style lang="scss">
.app-enter {
  .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
  }
  .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
  }
}
</style>
